<template>
  <div class="wangdian">
    <img src="../assets/imgs_about/yywd_y.png" alt="" />
    <div class="des">
      <p>
        为方便您获取最新的旅游资讯和产品信息，众信旅游分布在全市的直营门店和代理商可供您选择。以下是针对众信旅游各门店所做的具体位置标注示意图，您可就近选择门店进行相关出游咨询和报名事宜。
      </p>
      <p>
        众信旅游目前拥有百余名旅游顾问，每一位都经过严格的岗前系统培训，拥有丰富的目的地知识，具有良好的旅游资质和成熟的专业技能，我们将竭诚为您提供最优质的团组服务。
      </p>
      <p>
        您可选择拨打热线电话或亲临门店，我们将根据您的需求，提供最适合您的旅游产品和线路，为您打造舒适、理想的旅程。
      </p>
    </div>
    <div class="ditu">
      <div class="nav">
        <span
          :class="{ active: now == i }"
          @click="loadditu(i)"
          v-for="({ name }, i) in citys"
          :key="i"
          >{{ name }}</span
        >
      </div>
      <div
        id="container"
        style="width: 720px; height: 800px; border: 1px solid black"
        class="container"
      ></div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      now: 0,
      citys: [
        { name: "成都", x: 104.066301, y: 30.572961 },
        { name: "北京", x: 116.407387, y: 39.904179 },
        { name: "上海", x: 121.473667, y: 31.230525 },
        { name: "天津", x: 117.201509, y: 39.085318 },
        { name: "石家庄", x: 114.514976, y: 38.042007 },
        { name: "杭州", x: 120.210792, y: 30.246026 },
        { name: "武汉", x: 114.304569, y: 30.593354 },
        { name: "南京", x: 118.796624, y: 32.059344 },
        { name: "西安", x: 108.939645, y: 34.343207 },
      ],
    };
  },
  methods: {
    loadditu(i) {
      this.now = i;
      AMapLoader.load({
        key: "38cb6f32bb44a12c34ea08f1b1efe815", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.Geolocation",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          let map = new AMap.Map("container", {
            zoom: 11, //级别
            center: [this.citys[this.now].x, this.citys[this.now].y], //中心点坐标
            viewMode: "3D", //使用3D视图
          });
          //实时路况图层
          var trafficLayer = new AMap.TileLayer.Traffic({
            zIndex: 10,
          });
          map.add(trafficLayer); //添加图层到地图
          //添加maker
          var marker = new AMap.Marker({
            position: [this.citys[this.now].x, this.citys[this.now].y], //位置
          });
          map.add(marker); //添加到地图

          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar({ position: "LT" }));

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.HawkEye({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(
            new AMap.Geolocation({ position: "LB", offset: [30, 55] })
          );
        })
        .catch(e => {
          console.log(e);
        });
    },
  },
  mounted() {
    //添加密钥
    window._AMapSecurityConfig = {
      securityJsCode: "f35456f7bed4c26bc2a8f7562d0b05ea",
    };
    this.loadditu(0);
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
.wangdian {
  padding-bottom: 50px;
  > img {
    margin-top: 40px;
    padding-bottom: 14px;
  }
}
.des {
  margin-bottom: 40px;
  > p {
    line-height: 24px;
    margin-top: 10px;
    text-indent: 2em;
    font-size: 14px;
  }
}
.ditu {
  display: flex;
  justify-content: space-between;

  > .nav {
    display: flex;
    flex-direction: column;

    > span {
      color: #666;
      cursor: pointer;
      background: #ededed;
      border-radius: 5px;
      height: 30px;
      line-height: 30px;
      margin-bottom: 1px;
      width: 100px;
      text-align: center;

      &.active {
        background-color: #fbb957;
        color: white;
      }
    }
  }
}
</style>
